<template>
  <div class="affix-container">
    <el-affix :offset="0" class="ma-[-20px]">
      <el-card shadow="never">
        <el-steps class="m-auto w-1080px" :active="active" align-center>
          <el-step title="场地基本信息" description="" />
          <el-step title="基线计算" description="" />
          <el-step title="损害确认" description="" />
          <el-step title="修复技术决策" description="" />
          <el-step title="修复技术推荐" description="" />
          <el-step title="损害价值量化" description="" />
        </el-steps>
      </el-card>
    </el-affix>

    <el-card shadow="never" class="mt-32px">
      <div>
        <Step1Form v-show="active === 0" :target="target" @next="nextStep" />
        <template v-if="active > 0">
          <Step2Form
            v-show="active === 1"
            :formRecord="formRecord"
            @next="nextStep"
            @cancel="active&#45;&#45;"
          />
        </template>
        <template v-if="active > 1">
          <Step3Form
            v-show="active === 2"
            :formRecord="formRecord"
            @next="nextStep"
            @cancel="active&#45;&#45;"
          />
        </template>
        <template v-if="active > 2">
          <Step4Form
            v-show="active === 3"
            :formRecord="formRecord"
            @next="nextStep"
            @cancel="active--"
          />
        </template>
        <template v-if="active > 3">
          <Step5Form
            v-show="active === 4"
            :formRecord="formRecord"
            @next="active++"
            @cancel="active--"
          />
        </template>
        <template v-if="active > 4">
          <Step6Form v-show="active === 5" :formRecord="formRecord" @cancel="active--" />
        </template>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import Step1Form from './components/step1.vue'
import Step2Form from './components/step2.vue'
import Step3Form from './components/step3.vue'
import Step4Form from './components/step4.vue'
import Step5Form from './components/step5.vue'
import Step6Form from './components/step6.vue'
import { getListApi } from '@/api/home'
import type { List as Target } from '@/api/home/types'

defineOptions({ name: 'Appraisal' })

const active = ref(0)

const target = ref<Target[]>([])
const getTarget = async () => {
  const { list } = await getListApi({
    pageNo: 1,
    pageSize: 99
  })
  target.value = list
}
getTarget()

// 表单合集
let formRecord: any = {}
const nextStep = (data: any) => {
  formRecord = Object.assign({}, data, formRecord)
  active.value++
}
const save = () => {}
</script>
